<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .header {
            width: 250px;
            position: relative;
            z-index: 999;
        }

        .header button {
            position: absolute;
            top: 15px;
            left: 10px;
        }

        .input {
            position: absolute;
            left: 130px;
            top: 15px;
            padding-right: 35px;
            box-sizing: border-box;
        }

        .icon {
            position: absolute;
            left: 350px;
            top: 20px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 作者：雷浩然 -->
    <div class="header">
        <button class="layui-btn layui-btn-normal layui-btn-radius" id="add">添加电影</button>
        <input type="text" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input input">
        <i class="layui-icon layui-icon-search icon" style="font-size: 25px; color: #1E9FFF;" id="submit"></i>
    </div>
    <table id="show"></table>
    <script src="../../js/lodash.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/common.js"></script>
    <script>

        layui.use('table', function () {
            let table = layui.table;
            let form = layui.form;

            table.render({
                elem: '#show',
                url: '/api/Movie',  //数据接口
                page: true,  //开启分页
                toolbar: '#headerbar',
                cols: [
                    [
                        {
                            field: 'name',
                            title: '名称',
                            templet: `<div>
                            <span>{{d.name}}</span>
                            |
                            <span>{{d.ename}}</span>
                            </div>`,
                            sort: true,
                        },
                        {
                            field: 'type',
                            title: '类型',
                            width: 180
                        },
                        {
                            field: 'area',
                            title: '地区',
                            sort: true,
                            width: 180
                        },
                        {
                            field: 'time',
                            title: '时长(分)',
                            sort: true,
                            width: 100
                        },
                        {
                            field: 'isHot',
                            title: '正在热映',
                            sort: true,
                            width: 100,
                            templet: "#hotSwitch"
                        },
                        {
                            field: 'isComing',
                            title: '即将上映',
                            sort: true,
                            width: 100,
                            templet: "#comingSwitch"
                        },
                        {
                            field: 'isClassic',
                            title: '经典影片',
                            sort: true,
                            width: 100,
                            templet: "#classicSwitch"
                        },
                        {
                            field: 'upDate',
                            title: '上映日期',
                            sort: true,
                            width: 180
                        },
                        {
                            field: 'score',
                            title: '评分',
                            sort: true,
                            width: 70
                        },
                        {
                            title: "操作",
                            templet: `
                            <div>
                                <a class="layui-btn layui-btn-sm layui-btn-default" href="./add_update_movie.html?id={{d._id}}">
                                    基本信息
                                </a>
                                <button class="layui-btn layui-btn-sm layui-btn-default" onclick="editArray('{{d._id}}', '{{d.name}}', 'director.html')">
                                    导演
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-default" onclick="editArray('{{d._id}}', '{{d.name}}', 'actor.html')">
                                    演员
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-default" onclick="editArray('{{d._id}}', '{{d.name}}', 'photo.html')">
                                    剧照
                                </button>
                                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del"  onclick="delCourse('{{d._id}}',this)">
                                    <i class="layui-icon">&#xe640;</i>
                                </button>
                            </div>
                            `
                        }
                    ]
                ]
            })
            form.on('switch(isHot)', function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.value,
                    method: "put",
                    data: {
                        isHot: obj.elem.checked
                    }
                })
            });
            form.on('switch(isComing)', function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.value,
                    method: "put",
                    data: {
                        isComing: obj.elem.checked
                    }
                })
            });
            form.on('switch(isClassic)', function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.value,
                    method: "put",
                    data: {
                        isClassic: obj.elem.checked
                    }
                })
            });
        });
        function delCourse(id, btn) {
            layer.confirm('确定删除吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/Movie/" + id,
                    method: "delete",
                    success: function (data) {
                        if (data) {
                            layer.confirm("删除成功！", {
                                icon: 1,
                            }, function (index) {
                                $(btn).parents("tr").remove();
                                layer.close(index);
                            })
                        } else {
                            layer.confirm("不能删除", {
                                icon: 2,
                            });
                        }
                    }
                });

            });
        }

        function editArray(id, name, html) {
            layui.layer.open({
                type: 2,
                content: './' + html + '?id=' + id,
                area: ['800px', '400px'],
                title: "电影：" + name
            });
        }

        $("#submit").click(function () {
            const key = $("#txtKey").val();
            layui.table.reload("show", {
                where: {
                    key,
                    page: 1
                }
            });
        })

        let add = document.getElementById("add");
        add.onclick = function () {
            location.href = "./add_update_movie.html";
        }
    </script>

    <script id="hotSwitch" type="text/html">
        <input type="checkbox" lay-skin="switch" lay-text="开|关" data-field="isHot" lay-filter="isHot" value="{{d._id}}" {{d.isHot?'checked' : '' }}>
    </script>

    <script id="comingSwitch" type="text/html">
        <input type="checkbox" lay-skin="switch" lay-text="开|关" data-field="isComing" lay-filter="isComing" value="{{d._id}}" {{d.isComing?'checked' : '' }}>
    </script>

    <script id="classicSwitch" type="text/html">
        <input type="checkbox" lay-skin="switch" lay-text="开|关" data-field="isClassic" lay-filter="isClassic" value="{{d._id}}" {{d.isClassic?'checked' : '' }}>
    </script>

</body>

</html>